<script setup name="subabsent">
import timeFormat from '@/utils/timeFormat';
import OAPageHeader from '@/components/OAPageHeader.vue';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import absentHttp from '@/api/absentHttp';
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import OADialog from '@/components/OADialog.vue';

const dialogFormVisible = ref(false)
const absents = ref([])
const absentFormRef = ref(null)
const handleIndex = ref(null)
const pagination = ref({
    total: 0,
    page: 1
})

const absentForm = ref({
    status: 2,
    response_content: ""
})

const rules = ref({
    status: [
        { required: true, message: "请选择处理结果", trigger: "change" }
    ],
    response_content: [
        { required: true, message: "请填写审批意见", trigger: "blur" }
    ]
})

function onShowDialog(index){
    absentForm.value.status = 2
    absentForm.value.response_content = ""
    dialogFormVisible.value = true
    handleIndex.value = index
}
const onSubmitAbsent = () => {
    absentFormRef.value.validate(async(valid,fields)=>{
        if(valid){
            try{
                const absent = absents.value[handleIndex.value]
                let res = await absentHttp.handleSubAbsent(absent.id,absentForm.value.status,absentForm.value.response_content)
                absents.value.splice(handleIndex.value,1,res)
                ElMessage.success("处理成功")
                dialogFormVisible.value = false
            }catch(err){
                const errorMsg = err.response?.data?.detail || err.message || "未知错误"
                ElMessage.error(`请求失败: ${errorMsg}`)
            }
        }else{

        }
    })
}

onMounted(async () => {
    try {
        let { count, results } = await absentHttp.getSubAbsents(pagination.value.page)
        pagination.value.total = count
        absents.value = results
    } catch (err) {
        ElMessage.error(err)
    }
})
</script>


<template>
    <div>
        <OADialog title="处理考勤" v-model="dialogFormVisible" @submit="onSubmitAbsent">
            <el-form :model="absentForm" :rules="rules" ref="absentFormRef">
                <el-form-item labe="处理状态"  prop="status">
                    <el-radio-group v-model="absentForm.status">
                        <el-radio :value="2" border>审核通过</el-radio>
                        <el-radio :value="3" border>审核拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="处理意见"  prop="response_content">
                    <el-input v-model="absentForm.response_content" :rows="10" type="textarea" placeholder="请输入处理意见"/>
                </el-form-item>
            </el-form>
        </OADialog>
        <OAMain title="下属考勤">
            <el-table :data="absents" style="width: 100%" class="laoqin_list">
                <el-table-column label="创建时间">
                    <template #default="scope">
                        {{ timeFormat.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" />
                <el-table-column  label="请假人" >
                    <template #default="scope">
                        {{ '[' + scope.row.requester.department.name + ']' + scope.row.requester.realname }}
                    </template>
                </el-table-column>
                <el-table-column prop="absent_type.name" label="假期类型" />
                <el-table-column prop="request_content" label="请假原因" />
                <el-table-column prop="start_date" label="开始日期" />
                <el-table-column prop="end_date" label="结束日期" />
                <el-table-column prop="responder.realname" label="审核领导" />
                <el-table-column prop="response_content" label="审批意见" />
                <el-table-column label="审批状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.status == 1">审核中</el-tag>
                        <el-tag type="success" v-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == 3">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="处理状态">
                    <template #default="scope">
                        <el-button v-if="scope.row.status == 1" @click="onShowDialog(scope.$index)" type="primary"
                            icon="EditPen"></el-button>
                        <el-button v-else disabled type="default">已处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </OAMain>
        <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
    </div>

</template>

<style scoped>
.laoqin_list {
    margin-top: 20px;
    border: 1px solid #fff;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
}
</style>